<template>
  <div class="main" :style="{border: '4px solid red'}">
<!--    <a-row :style="{border: '4px solid black',height:'102px'}">-->
<!--      <a-col :span="22" :offset="1" :style="{border: '4px solid red'}">-->
<!--      </a-col>-->
<!--    </a-row>-->
    <a-row :style="{border: '4px solid blue',height:'515px'}">
      <a-col :span="12"  :style="{border: '4px solid red'}">
        <div class="leftEcharts" :style="{margin:'5px'}">
          <div id="mom" :style="{border:'3px solid blue' ,width:'48%',height:'240px',float: 'right'}">
            <slot name="mom"></slot>
          </div>

          <div id="yoy" :style="{border:'3px solid blue' ,width:'48%',height:'240px',margin:'5px '}">
            <slot name="yoy"></slot>
          </div>

          <div id="sts" :style="{border:'3px solid blue' ,width:'48%',height:'240px',float:'right'}">
            <slot name="sts"></slot>
          </div>
          <div id="quantity" :style="{border:'3px solid blue' ,width:'48%',height:'240px',margin:'5px '}">
            <slot name="quantity">
            </slot>
          </div>
        </div>
      </a-col>
      <a-col :span="12"  :style="{border: '4px solid red'}">
        <div class="rightEcharts" :style="{margin:'5px'}">
          <div id="map" :style="{border:'3px solid blue',width:'100%',height:'485px'}">
            <slot name="map"></slot>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>

export default {
  name: "StsMonitoring",

}
</script>

<style scoped>
.main{
  width: 100%;
  height: 515px;
}
</style>
